<template>
    <div class="">
        <el-card class="box-card-from">
            <el-button type="primary" @click="dialogVisibleUpload = true">上传<i
                    class="el-icon-upload el-icon--right"></i></el-button>
        </el-card>
        <el-card class="box-card">
            <el-table :data="tableData" style="width: 100%" height="600">
                <el-table-column prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="version" label="版本号">
                </el-table-column>
                <el-table-column prop="versionUrl" label="版本链接">
                    <template slot-scope="scope">
                        <a :href="scope.row.versionUrl" target="_blank">{{ scope.row.versionUrl }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="上传日期">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" v-if="scope.row.userId !== 1">
                        <el-button size="mini" type="text" icon="el-icon-download" @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:appVersion:edit']">下发更新</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['system:appVersion:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />
        </el-card>


        <el-dialog title="上传APP版本" :visible.sync="dialogVisibleUpload" center width="40%">
            <div style="display: flex;justify-content: center;">
                <el-upload class="upload-demo" drag :action="url" :headers="header" :on-success="handleAvatarSuccess"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleUpload = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="更新的安卓设备" :visible.sync="dialogVisibleIssued" center width="40%">
            <el-form :model="formIssued">
                <el-form-item label="下发类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="formIssued.type">
                        <el-radio label="1">全部设备</el-radio>
                        <el-radio label="2">指定设备</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择设备" :label-width="formLabelWidth" v-if="formIssued.type == '2'">
                    <el-select v-model="formIssued.deviceList" multiple clearable filterable placeholder="请选择设备">
                        <el-option v-for="(item, index) in deviceList" :key="index" :label="item.deviceName"
                            :value="item.deviceMac"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleUpload = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitIssued">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { appVersionlist, addappVersion, delappVersion } from '@/api/app/index';
import { list } from '@/api/information/index';
import { getToken } from "@/utils/auth";
import { re } from 'mathjs';
export default {
    name: '',
    props: {},
    data() {
        return {
            formLabelWidth: '120px',
            dialogVisibleIssued: false,
            dialogVisibleUpload: false,
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
            formIssued: {
                type: '1',
                deviceList: [],
            },
            form: {
                versionUrl: "",
                version: ''
            },
            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            formInline: {
                user: '',
                region: ''
            },
            row: {}
        }
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getList()
        this.getDevice()
    },
    methods: {
        onSubmit() {
            addappVersion(this.form).then((res) => {
                this.dialogVisibleUpload = false
            });
        },
        /**
        * 获取设备列表
        */
        getDevice() {
            list(this.queryParamsDevice).then((res) => {
                this.deviceList = res.rows
                this.total = res.total
                this.dialogFormVisible = true
            });
        },
        getList() {
            appVersionlist(this.queryParams).then((res) => {
                this.tableData = res.rows
            });
        },
        handleAvatarSuccess(res, file) {
            this.form.versionUrl = res.data.url
            this.file.version = res.data.newFileName
        },
        handleDelete(row) {
            delappVersion(row.id).then((res) => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.getList();
            });
        },
        handleUpdate(row) {
            this.dialogVisibleIssued = true
            this.row = row
        },
        onSubmitIssued () {

        }
    },
}
</script>

<style scoped>
.box-card-from {
    display: flex;
    align-items: flex-end;
}
</style>